import React, {useEffect, useState} from 'react'
import {Button, Space, message, Tag} from 'antd'
import {history} from 'umi'
import {PlusOutlined, ArrowDownOutlined} from '@ant-design/icons'
import moment from 'moment'
import styles from './index.less'
import CustomTable from '@/components/Table'
import SearchForm from '@/components/SearchForm'
import Permissions from '@/components/Permissions'
import {checkType, generateStatusType, statusType} from './dict'
import {getstocktakeList, startstauts} from '@/service/storage/inventoryPlan'
import {downloadDocumentUrl} from '@/service/common/download'

const formItemLayout = {
	labelCol: {flex: '120px'},
	wrapperCol: {flex: '1'},
}

const inventoryPlan = () => {
	const [dataSourse, setDataSourse] = useState<any[]>([])
	const [checkData, setCheckData] = useState<any[]>([])
	const [, setIsModalOpen] = useState(false)
	const [total, setTotal] = useState()
	const [otherData, setOtherData] = useState<any>({})
	const [loading, setLoading] = useState(false)
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})

	// 获取列表列表数据
	const getInventoryList = (data?: any) => {
		setLoading(true)
		getstocktakeList({...params, ...data})
			.then((res: any) => {
				if (res?.success) {
					setDataSourse(res?.data?.records)
					setTotal(res?.data?.total)
					setLoading(false)
				} else {
					setLoading(false)
				}
			})
			.catch((err) => {
				setDataSourse([])
				message.error(err)
				setLoading(false)
			})
	}
	useEffect(() => {
		getInventoryList()
	}, [params])

	// 启用/禁用
	const startCheck = (id: number, status: any) => {
		const newParams = {
			id,
			status: status === 1 ? 0 : 1,
		}
		startstauts({...newParams}).then((res) => {
			if (res?.success) {
				message.success(res?.msg)
				getInventoryList()
			}
		})
	}
	const columns = [
		{
			title: 'NO',
			dataIndex: 'index',
			align: 'center',
			width: 60,
			defaultSortOrder: 'ascend',
			render(text: any, record: any, index: number) {
				return <span>{(params.current - 1) * 10 + index + 1}</span>
			},
		},
		{
			title: '盘点表名称',
			dataIndex: 'name',
			align: 'center',
			width: 120,
		},
		{
			title: '盘点类型',
			dataIndex: 'type',
			align: 'center',
			width: 100,
			render: (text: number) => (
				<>
					{checkType?.map((item: {key: number; label: string}) => {
						if (item?.key === text) {
							return (
								<Tag color="processing" key={item?.key}>
									{item?.label}
								</Tag>
							)
						}
						return ''
					})}
				</>
			),
		},
		{
			title: '表单备注',
			dataIndex: 'remark',
			align: 'center',
			width: 150,
		},
		{
			title: '表单状态',
			dataIndex: 'status',
			align: 'center',
			width: 100,
			render: (text: number) => (
				<>
					{statusType?.map((item: {key: number; label: string}) => {
						if (item?.key === text) {
							return (
								<Tag color="processing" key={item?.key}>
									{item?.label}
								</Tag>
							)
						}
						return ''
					})}
				</>
			),
		},
		{
			title: '盘点清单生成状态',
			dataIndex: 'generateStatus',
			align: 'center',
			width: 100,
			render: (text: number) => (
				<>
					{generateStatusType?.map(
						(item: {key: number; label: string}) => {
							if (item?.key === text) {
								return (
									<Tag color="processing" key={item?.key}>
										{item?.label}
									</Tag>
								)
							}
							return ''
						},
					)}
				</>
			),
		},
		{
			title: '创建人',
			dataIndex: 'createUserName',
			align: 'center',
			width: 100,
		},
		{
			title: '创建时间',
			dataIndex: 'createTime',
			align: 'center',
			width: 160,
		},
		{
			title: '操作',
			key: 'action',
			align: 'center',
			fixed: 'right',
			width: 120,
			render: (text: string, record: any) => (
				<Space size={18}>
					<Permissions permissionID="amc_storage_assetInventory_inventoryPlan_view">
						<Button
							type="link"
							onClick={() => {
								history.push({
									pathname:
										'/storage/assetInventory/inventoryPlan/view',
									query: {
										id: record?.id,
									},
								})
							}}>
							详情
						</Button>
					</Permissions>
					<Permissions permissionID="amc_storage_assetInventory_inventoryPlan_edit">
						<Button
							type="link"
							onClick={() => {
								history.push({
									pathname:
										'/storage/assetInventory/inventoryPlan/edit',
									query: {
										id: record?.id,
									},
								})
							}}>
							编辑
						</Button>
					</Permissions>
					{record.status === 1 ? (
						<Permissions permissionID="amc_storage_assetInventory_inventoryPlan_view">
							<Button
								type="link"
								onClick={() => {
									startCheck(record?.id, record?.status)
								}}>
								禁用
							</Button>
						</Permissions>
					) : (
						//
						''
					)}
					{record.status === 0 ? (
						<Permissions permissionID="amc_storage_assetInventory_inventoryPlan_view">
							<Button
								type="link"
								onClick={() => {
									setIsModalOpen(true)
									startCheck(record?.id, record?.status)
								}}>
								启用
							</Button>
						</Permissions>
					) : (
						//
						''
					)}
				</Space>
			),
		},
	]
	const formItems: any[] = [
		{
			type: 'group',
			key: 'group1',
			groupItems: [
				{
					type: 'input',
					label: '盘点表名称',
					name: 'name',
					key: 'name',
				},
				{
					type: 'select',
					key: 'status',
					name: 'status',
					label: '表单状态',
					keys: 'key',
					title: 'label',
					items: [
						{
							key: 0,
							label: '禁用',
						},
						{
							key: 1,
							label: '启用',
						},
					],
				},
				{
					type: 'timeRange',
					subtype: 'date',
					label: '创建时间',
					name: 'createTime',
					key: 'createTime',
				},
			],
		},
		{
			type: 'group',
			key: 'group2',
			groupItems: [
				{
					type: 'input',
					label: '创建人',
					width: '150px',
					name: 'createUser',
					key: 'createUser',
				},
				{},
				{},
			],
		},
	]
	const onFinish = (values: any) => {
		setOtherData({
			...values,
			createBeginTime:
				values?.createTime &&
				moment(values?.createTime[0]).format('YYYY-MM-DD HH:mm:ss'),
			createEndTime:
				values?.createTime &&
				moment(values?.createTime[1]).format('YYYY-MM-DD HH:mm:ss'),
		})
		const obj = {
			...values,
			createBeginTime:
				values?.createTime &&
				moment(values?.createTime[0]).format('YYYY-MM-DD HH:mm:ss'),
			createEndTime:
				values?.createTime &&
				moment(values?.createTime[1]).format('YYYY-MM-DD HH:mm:ss'),
		}
		delete obj.createTime
		getInventoryList(obj)
	}

	const onReset = () => {
		setDataSourse([])
		getInventoryList()
	}

	return (
		<div className={styles.inventoryPlan}>
			<div className={styles.content}>
				<div className={styles.search}>
					<SearchForm
						onFinish={onFinish}
						onReset={onReset}
						formItems={formItems}
						formLayout={formItemLayout}
					/>
				</div>
				<div className={styles.btnlist}>
					<Space size={12}>
						<Permissions permissionID="amc_storage_assetInventory_inventoryPlan_add">
							<Button
								icon={<PlusOutlined />}
								type="primary"
								ghost
								size="small"
								onClick={() => {
									history.push(
										'/storage/assetInventory/inventoryPlan/add',
									)
								}}>
								新增数据
							</Button>
						</Permissions>
						<Permissions permissionID="amc_storage_assetInventory_inventoryPlan_export">
							<Button
								icon={<ArrowDownOutlined />}
								className={styles.import}
								ghost
								size="small"
								onClick={() => {
									if (checkData?.length === 0)
										message.warning(
											'请选择需要导出的一条数据！',
										)
									if (checkData?.length > 1)
										message.warning('只能选择一条数据！')
									if (checkData.length === 1) {
										const {id} = checkData[0]
										downloadDocumentUrl({
											resourceId: '191',
											queryDesc:
												'导出盘点表,resourceId:191',
											queryParam: {
												...otherData,
												id,
											},
										})
									}
								}}>
								数据导出
							</Button>
						</Permissions>
					</Space>
				</div>
				<CustomTable
					params={params}
					columns={columns}
					dataSource={dataSourse}
					bordered
					total={total}
					pagination
					loading={loading}
					showRowSelection
					selectCallback={(keys: any, selectData: any) => {
						setCheckData(selectData)
					}}
					kid="id"
					callback={(pagination: any) => {
						setParams(pagination)
					}}
				/>
			</div>
			{/* <Modal
      text='确认要删除该数据吗？'
      onSubmit={deleteData}
      isModalOpen={isModalOpen}
      setIsModalOpen={setIsModalOpen}
    /> */}
		</div>
	)
}

export default inventoryPlan
